<template>
  <el-row
    justify="space-between"
    class="table-icon-box"
    v-bind="$attrs"
  >
    <el-col :span="props.iconFlex">
      <slot></slot>
    </el-col>
    <el-col :span="24 - props.iconFlex" class="config-table-box row">
      <!-- <el-dropdown :hide-on-click="false" @command="handleCommand">
          <div
            class="common-icon-box"
            style="border: var(--el-border);border-radius: 4px 0 0 4px;"
          >
            <el-icon :size="20"><Rank /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="left">靠左</el-dropdown-item>
              <el-dropdown-item command="center">
                居中
              </el-dropdown-item>
              <el-dropdown-item command="right">
                靠右
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
      <el-button-group style="margin-right: 12px;">
        <el-button
          type="default"
          @click="handleCommand(item.name, index)"
          @mouseenter="handleMouseenter(index)"
          @mouseleave="handleMouseleave(index)"
          v-for="(item, index) in btnList"
          :key="item"
        >
          <el-icon>
            <SvgIcon
              :icon-class="item.icon"
              :color="btnIndex == index ? '#B52427' : '#606266'"
            ></SvgIcon>
          </el-icon>
        </el-button>
      </el-button-group>
      <el-dropdown :hide-on-click="false">
        <!-- <div
          class="common-icon-box align-items"
          style="border: var(--el-border);border-radius: 0px 4px 4px 0px;border-left: none;"
        >
          字段显示<el-icon :size="16"><Filter /></el-icon>
        </div> -->
        <el-button type="default"
          >字段显示
          <el-icon class="el-icon--right"
            ><el-icon><Filter /></el-icon
          ></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-row style="width: 180px;">
                <el-col
                  :span="12"
                  v-for="(item, index) in props.config"
                  :key="index"
                >
                  <el-checkbox
                    v-model="item.checked"
                    :label="item.label"
                    :disabled="item.disabled"
                    size="large"
                  />
                </el-col>
              </el-row>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface PropsType {
  //   集合
  tableData?: any
  //   自定义的展示数据
  config?: any
  //   排版方式.left/center/right
  align?: string
  iconFlex?: number
}
const props = withDefaults(defineProps<PropsType>(), {
  tableData: [],
  config: [],
  iconFlex: 18,
  align: 'center'
})
interface EmitType {
  (e: 'changeAlign', val: string): void
}
const emit = defineEmits<EmitType>()
const align = ref<any>('center')
const btnList = ref([
  { name: 'left', icon: 'icon-left' },
  { name: 'center', icon: 'icon-center' },
  { name: 'right', icon: 'icon-right' }
])
const btnIndex = ref(1)
const choiceIndex = ref(1)
const handleCommand = (command: string | number | object, index: number) => {
  align.value = command
  choiceIndex.value = index
  emit('changeAlign', align.value)
}
const handleMouseenter = (index: number) => {
  btnIndex.value = index
}
const handleMouseleave = (index: number) => {
  btnIndex.value = choiceIndex.value
}
</script>
<style lang="scss" scoped>
.table-icon-box {
  padding-bottom: 10px;
}
.config-table-box {
  // border: var(--el-border);
  border-radius: 4px;
  // padding: 5px;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .common-icon-box {
    width: auto;
    height: 26px;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    padding-bottom: 0;
    &:hover {
      background-color: var(--el-color-primary);
      color: var(--el-color-white);
      // border: 1px solid var(--el-color-primary)!important;
    }
  }
}
</style>
<style lang="scss">
.el-dropdown-menu__item {
  .el-checkbox.el-checkbox--large {
    height: 25px;
  }
}
</style>
